<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>订单信息
        </b>
        <div class="u-right u-5mt">
          <el-button
            type="success"
            size="small"
            icon="el-icon-document-checked"
            @click="orderCheck()"
            v-if="objForm.handle_status!=2"
          >提交保存</el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form
        :model="objForm"
        :rules="rules"
        ref="objForm"
        label-width="100px"
        class="u-form"
        style="max-width:900px"
      >
        <el-form-item label="审核状态">
          <template>
            <el-radio-group v-model="subform.handle_status" :disabled="objForm.handle_status>=2">
              <el-radio :label="1">待审核</el-radio>
              <el-radio :label="2">同意</el-radio>
              <el-radio :label="3">拒绝</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="拒绝原因" v-if="subform.handle_status==3">
          <el-input type="textarea" v-model="subform.remark"></el-input>
        </el-form-item>
        <el-form-item label="代理商" v-if="objForm.agency_name">
          <el-tag type="info">{{objForm.agency_name}}</el-tag>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-tag type="info">{{objForm.order_sn}}</el-tag>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-tag type="info">{{objForm.address}}</el-tag>
        </el-form-item>
        <el-form-item label="总金额">
          <el-tag type="info">{{objForm.order_total}}</el-tag>
        </el-form-item>
        <el-form-item label="商品信息">
          <template>
            <el-table :data="objForm.items" stripe style="width: 100%">
              <el-table-column prop="goods_title" label="商品名称" width="180"></el-table-column>
              <el-table-column label="商品封面" width="100">
                <template slot-scope="scope">
                  <el-image
                    style="max-width: 60px;"
                    :src="scope.row.goods_img"
                    :data-src="scope.row.goods_img"
                    fit="cover"
                    lazy
                  ></el-image>
                </template>
              </el-table-column>

              <el-table-column prop="goods_price" label="单价" width="80"></el-table-column>
              <el-table-column prop="goods_storage" label="平台库存"></el-table-column>
              <el-table-column prop="goods_number" label="数量"></el-table-column>
              <el-table-column prop="order_total" label="项总价"></el-table-column>
              <el-table-column label="提示">
                <template slot-scope="scope">
                  <el-tag type="danger" v-if="scope.row.goods_storage<scope.row.goods_number">平台库存不足</el-tag>
                  <el-tag v-else >库存充足</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
export default {
  mixins: [commonEdit],
  data() {
    return {
      apiName: "agency",
      backRoute: "agencyOrderIndex", //成功跳转地址
      objForm: {
        id: ""
      },
      subform: {
        id: "",
        handle_status: 1,
        remark: ""
      }
    };
  },
  methods: {
    async getInfo() {
      const self = this;
      self.$api[self.apiName].orderInfo(self.objForm.id).then(response => {
        if (response.code == 1) {
          self.objForm = response.data;
          self.subform.id = self.objForm.id;
          self.subform.handle_status = self.objForm.handle_status;
          self.subform.remark = self.objForm.remark;
        }
      });
    },
    orderCheck() {
      const self = this;
      self.$api[self.apiName].agencyOrderStatus(self.subform).then(response => {
        if (response.code == 1) {
          self.getInfo();
        }
      });
    }
  },
  created() {
    if (this.$route.params.id) {
      this.objForm.id = this.$route.params.id;
    }
  }
};
</script>
<style>
.el-step.is-center .el-step__description {
  padding: 0;
  text-align: center;
}
.el-step__description.is-success {
  color: #666;
}
</style>
